<template>
        <van-button v-if="isFollowed" :loading="loading" 
         type="info" size="small" 
        @click="operateFollowed">已关注</van-button>
        <van-button v-else :loading="loading" 
         type="info" size="small" color="#3296fa" 
        @click="operateFollowed">+&nbsp;关注</van-button>
</template>
<script>
import { addFollowing, cancleFollowing } from '@/apis/article'
import { showFailToast } from 'vant'

export default {
    props: {
        isFollowed: {
            type: Boolean,
            required: true
        },
        userId: {
            type: [Number,String,Object],
            required: true
        }
    },
    data() {
        return {
            loading: false
        }
    },
    methods: {
        async operateFollowed() {
          this.loading = true
          try {
            if (!this.isFollowed) {
              const data = await addFollowing(this.userId)
              console.log(data);
            } else {
              const data = await cancleFollowing(this.userId)
              console.log(data);
            }
            // this.isFollowed = !this.isFollowed
            this.$emit('update-followed',!this.isFollowed)
          } catch (error) {
            console.log(error);
            if (error.response && error.response.status === 400) {
              showFailToast('不能关注自己') 
            } else {
              showFailToast('操作失败') 
            }
          }
          this.loading = false

        }
    }
}
</script>
<style lang="">
    
</style>